<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1906880_rpx85mbn0g.css" />
<link rel="stylesheet" href="./css/publice.css" />
<link rel="stylesheet" href="./css/vip-m.min.css" />
<div class="m-vip-options-wrap">
  <div class="navbar">
    <div class="nav-item active">
      <span>分类VIP</span>
    </div>
    <div class="nav-item">
      <span>全站通VIP</span>
    </div>
    <div class="nav-item">
      <span>全站通终身VIP</span>
    </div>
  </div>

  <div class="nav-content wrap-1">
    <div class="btn-list">
      <a class="btn-item btn active"> BIM土建VIP </a>
      <a class="btn-item btn"> BIM土建VIP </a>
      <a class="btn-item btn"> BIM土建VIP </a>
    </div>
    <div class="shop-contet">
      <div class="vip-item active">
        <div class="type-text">分类会员</div>
        <div class="price">
          <span>￥4800 <span class="count">/年</span></span>
          <span class="des-text">（不限次学习）</span>
        </div>
        <p>（BIM土建VIP）</p>
        <div class="gou">
          <i class="iconfont icon-duigou"></i>
        </div>
      </div>

      <a class="open-btn btn"> 立即开通 </a>
    </div>
  </div>

  <div class="nav-content wrap-2" hidden>
    <p>全站视频课程+资源+素材不限次学习/下载</p>
    <div class="list">
      <div class="vip-item active">
        <div class="type-text">1年会员</div>
        <div class="price">
          <span>￥1899 <span class="count">/年</span></span>
          <br />
          <span class="des-text">（不限次学习）</span>
        </div>
        <p>（全站通VIP|12个月）</p>
        <div class="gou">
          <i class="iconfont icon-duigou"></i>
        </div>
      </div>
      <div class="vip-item">
        <div class="type-text">2年会员</div>
        <div class="price">
          <span>￥2899 <span class="count">/2年</span></span>
          <br />
          <span class="des-text">（不限次学习）</span>
        </div>
        <p>（全站通VIP|24个月）</p>
        <div class="gou">
          <i class="iconfont icon-duigou"></i>
        </div>
      </div>
    </div>

    <div class="btn-wrap">
      <a class="open-btn btn"> 立即开通 </a>
    </div>
  </div>
  <div class="nav-content wrap-3" hidden>
    <p>全站视频课程+资源+素材不限次学习/下载</p>
    <div class="vip-item active">
      <div class="type-text">分类会员</div>
      <div class="price">
        <span>￥4800 <span class="count">/年</span></span>
        <span class="des-text">（不限次学习）</span>
      </div>
      <p>（BIM土建VIP）</p>
      <div class="gou">
        <i class="iconfont icon-duigou"></i>
      </div>
    </div>
    <a class="open-btn btn"> 立即开通 </a>
  </div>
</div>

<script>
  (function () {
    const wrap = document.querySelector(".m-vip-options-wrap");

    const navList = wrap.querySelectorAll(".m-vip-options-wrap .nav-item");
    const navContents = wrap.querySelectorAll(
      ".m-vip-options-wrap .nav-content"
    );

    for (let i = 0; i < navList.length; i++) {
      navList[i].addEventListener("click", () => {
        for (let j = 0; j < navList.length; j++) {
          navList[j].classList.remove("active");
          navContents[j].style.display = "none";
        }
        navList[i].classList.add("active");
        navContents[i].style.display = "block";
      });
    }
    const btnList = [
      {
        id: 1,
        btnText: "BIM土建VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 2,
        btnText: "BIM机电VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 3,
        btnText: "BIM桥梁VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 4,
        btnText: "BIM隧道VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 5,
        btnText: "BIM后期动画VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 6,
        btnText: "BIM一级VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 7,
        btnText: "BIM二级建筑VIP",
        price: 599,
        oldPrice: 799,
      },
      {
        id: 8,
        btnText: "BIM二级结构VIP",
        price: 599,
        oldPrice: 799,
      },

      {
        id: 9,
        btnText: "BIM二级设备VIP",
        price: 599,
        oldPrice: 799,
      },
    ];
    let btnIndex = 0;

    function renderBtn() {
      const btnWrap = wrap.querySelector(".wrap-1 .btn-list");

      btnWrap.innerHTML = btnList
        .map((btn, index) => {
          let classname = "";
          if (index === btnIndex) {
            classname = "active";
          }

          return `
          <a class="btn-item btn ${classname}"    data-index="${btn.id}"> ${btn.btnText} </a>
        `;
        })
        .join("");

      const btnDoms = btnWrap.querySelectorAll(".btn");
      const shopBox = wrap.querySelector(".wrap-1 .shop-contet");

      for (let i = 0; i < btnDoms.length; i++) {
        btnDoms[i].addEventListener("click", () => {
          for (let j = 0; j < btnDoms.length; j++) {
            btnDoms[j].classList.remove("active");
          }
          btnDoms[i].classList.add("active");
          shopBox.innerHTML = `
          <div class="vip-item active">
            <div class="type-text">分类会员</div>
            <div class="price">
              <span>￥${btnList[i].price} <span class="count">/年</span></span>
              <span class="des-text">（不限次学习）</span>
            </div>
            <p>（${btnList[i].btnText}）</p>
            <div class="gou">
              <i class="iconfont icon-duigou"></i>
            </div>
          </div>
          <a class="open-btn btn" data-index="${btnList[i].id}"> 立即开通 </a>
          `;
        });
      }
      btnDoms[0].click();
    }

    const yearOptions = [
      {
        time: 12,
        price: 1899,
        oldPrice: 2499,
        count: 1,
        id: 11,
      },
      {
        time: 24,
        price: 2899,
        oldPrice: 4998,
        count: 2,
        id: 12,
      },
    ];

    function wrap2Render() {
      const ops = wrap.querySelectorAll(".wrap-2 .vip-item");
      const btnWrap = wrap.querySelector('.wrpa .btn-wrap')
      for (let i = 0; i < ops.length; i++) {
        ops[i].addEventListener("click", () => {

          for (let j = 0; j < ops.length; j++) {
            ops[j].classList.remove('active')
          }
          ops[i].classList.add('active')

          btnWrap.innerHTML = `
          <a class="open-btn btn" data-id="${yearOptions[i].id}"}> 立即开通 </a>
          `
        });
      }
      ops[0].click()
    }
    wrap2Render()
    renderBtn();
  })();
</script>
